<div>
  <strong>${ _("Total instances: ") }</strong>
  ${ TOTAL_INSTANCE }
</div>

<table class="table table-hover table-bordered table-striped">
  <thead>
    <tr>
      <th><i class="icon-check-empty y-check-all"></i></th>
      <th>ID</th>
      <th>${ _("Name") }</th>
      <th>${ _("Owner") }</th>
      <th>
        <i class="icon-exchange"></i>
        % if SORTBY == 'cpus':
        ${ _("CPUS") }
        % elif SORTBY == 'memory':
        ${ _("Memory") }
        % elif SORTBY == 'rx':
        ${ _("RX") }
        % elif SORTBY == 'tx':
        ${ _("TX") }
        % elif SORTBY == 'bandwidth':
        ${ _("Bandwidth") }
        % endif
      </th>
      <th>${ _("Updated") }</th>
    </tr>
  </thead>
  <tbody>
    % for I in INSTANCE_LIST:
    <tr class="y-check-line" id="i${ I.id }">
      <td><i class="icon-check-empty y-check"></i></td>
      <td class="y-id">${ I.id }</td>
      <td>
        ${ I.status_icon }
        % if I.isprivate:
        <i class="icon-eye-close"></i>
        % else:
        <i class="icon-ok"></i>
        % endif
        <a href="${ reverse_url('admin:instance:view') }?id=${ I.id }">${ I.name }</a>
      </td>
      <td>
        % if I.user_id:
        <a href="${ reverse_url('admin:user:view') }?id=${ I.user.id }">${ I.user.username }</a>
        % endif
      </td>

      <td>
        % if SORTBY == 'cpus':
        ${ I.cpus } ${ _("core") }
        % elif SORTBY == 'memory':
        ${ I.memory } M
        % elif SORTBY == 'rx':
        ${ human_size(I.rx) }
        % elif SORTBY == 'tx':
        ${ human_size(I.tx) }
        % elif SORTBY == 'bandwidth':
        ${ I.bandwidth } M
        % endif
      </td>

      <td>${ htime(I.updated) }</td>
    </tr>
    % endfor
  </tbody>
  <tfoot>
    <tr>
      <td><i class="icon-check-empty y-check-all"></i></td>
      <td colspan="8">
        <a href="" class="y-select-all">${ _("Select All") }</a>
        <span class="divider">/</span>
        <a href="" class="y-unselect-all">${ _("Unselect All") }</a>
        <span class="divider">/</span>
        <a href="" class="y-select-reverse">${ _("Select Reverse") }</a>
      </td>
    </tr>
  </tfoot>
</table>

<div>
  <div class="btn-group">
    <a class="btn y-action-nonzero disabled action-setattr" href="${ reverse_url('instance:attr_set') }?attr=isprivate&value=true"><i class="icon-eye-close"></i> ${ _("Private") }</a>
    <a class="btn y-action-nonzero disabled action-setattr" href="${ reverse_url('instance:attr_set') }?attr=isprivate&value=false"><i class="icon-eye-open"></i> ${ _("Public") }</a>
  </div>

  <div class="btn-group">
    <a class="btn y-action-nonzero disabled action-lifecontrol" href="${ reverse_url('instance:lifecontrol') }?action=run"><i class="icon-refresh"></i> ${ _("Run") }</a>
    <a class="btn y-action-nonzero disabled action-lifecontrol" href="${ reverse_url('instance:lifecontrol') }?action=stop"><i class="icon-off"></i> ${ _("Stop") }</a>
    <a class="btn y-action-nonzero disabled action-lifecontrol" href="${ reverse_url('instance:lifecontrol') }?action=query"><i class="icon-question-sign"></i> ${ _("Query") }</a>
  </div>

</div>

${ PAGE_HTML }

<script type="text/javascript">
  $( function() {
    y_checkarea_binding();
    instance_list_attr_set(".action-setattr");
    multi_life_control( ".action-lifecontrol" );
  });
</script>
